<template>
	<gracePage :customHeader="false">
		<view slot="gBody" style="background: #FFFFFF;" :style="{height:height}">
			<view style="background-image: url(../../static/register.png); background-size: contain; width: 750rpx;height: 800rpx;">

			</view>
			<view class="grace-flex-center grace-wrap" style="margin-top: -200rpx;">
				<view style="margin-top: 25rpx;">
					<view class="grace-rows" style="margin: 0 auto;">
						<image src="../../static/yonghu.png" style="width: 36rpx;height: 36rpx;"></image>
						<input style="margin-left: 30rpx;width: 530rpx" v-model="phoneno" placeholder="请输入账号" />
					</view>
					<view style="margin-top: 15rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
				</view>
				<view style="margin-top: 25rpx;">
					<view class="grace-rows" style="margin: 0 auto;">
						<image src="../../static/yanzhengma.png" style="width: 36rpx;height: 36rpx;"></image>
						<input style="margin-left: 30rpx;width: 330rpx" v-model="yanzm" placeholder="请输入短信验证码" />
						<button type="primary" class="login-sendmsg-btn" @tap='getVCode'>{{vcodeBtnName}}</button>
					</view>
					<view style="margin-top: 5rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
				</view>

				<view style="margin-top: 25rpx;">
					<view class="grace-rows" style="margin: 0 auto;">
						<image src="../../static/mima.png" style="width: 36rpx;height: 36rpx;"></image>
						<input password="true" v-model="pwd" style="margin-left: 30rpx;width: 530rpx" placeholder="请输入新密码" />
					</view>
					<view style="margin-top: 15rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
				</view>
			</view>
			<button @tap="quern" :style="{background:button_color}" class="button_color"><text
				 style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1);line-height:80rpx;">确认</text></button>
<ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				phoneno: '',
				pwd: '',
				yanzm: '',
				vcodeBtnName: "获取验证码",
				height: '',
				loadings:false
			}
		},
		onLoad: function() {
			this.height = '100%'
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 获取短信验证码
			getVCode: function() {
				var myreg = /^[1][1,2,3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.phoneno)) {
					uni.showToast({
						title: '请正确填写手机号码',
						icon: "none"
					});
					return false;
				}
				// 手机号码为 :  this.phoneno
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
				// 假设发送成功，给用户提示
				this.myPost(
					'api/sendcms/send_cms', {
						phone: this.phoneno,
						class: 'ChangePassword'
					},
					function(res) {
						console.log(res);
						uni.showToast({
							title: '短信已发送，请注意查收',
							icon: "none"
						});
					}
				);

				// 倒计时
				this.countNum = 120;
				this.countDownTimer = setInterval(function() {
					this.countDown();
				}.bind(this), 1000);
			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
			// 确认修改密码按钮
			quern: function() {
				if (this.phoneno.length > 0 || this.yanzm.length > 0 || this.pwd.length > 0) {
					var vm = this;
					vm.loadings = true
					this.myPost(
						'api/index/change_password', {
							user: this.phoneno,
							n_pwd: this.pwd,
							e_cms: this.yanzm
						},
						function(res) {
							vm.loadings = false
							console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/user/login'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}
					)
				} else {
					uni.showToast({
						title: '请输入完整的信息',
						icon: "none"
					});
				}
			}
		},
		components: {
			gracePage
		}
	}
</script>

<style>
	.button_color{
		margin-top: 100rpx; width:607rpx;height:88rpx;background:#3187D5;border-radius:44rpx;
	}
	page{
		background-color: #FFFFFF;
	}
	.login-sendmsg-btn {
		background: rgba(181, 181, 181, 1) !important;
		color: rgba(51, 51, 51, 1) !important;
		width: 200rpx;
		height: 32px;
		line-height: 32px;
		font-size: 12px !important;
	}
</style>
